<template>
  <div class="cpgl_box">
    <!--  :style="$parent.$parent.collapsed==false?'left: 10%':'left:80px'" -->
    <div class="header_sele">
      <div class="add_qy">
        <!-- <a-button type="primary" @click="start">选择删除</a-button> -->
        <span v-if="nbdwmc">内部寄售客户：{{nbdwmc}}</span>
      </div>
      <div>
        <div class="list_head">
          <div class="fl_right">
            <span>请选分类：</span>
            <a-select
              showSearch
              title="请输入你要搜索的分类名称"
              placeholder="请输入搜索的分类名称"
              optionFilterProp="children"
              style="width: 200px;margin-right:10px;"
              @change="flchange"
              :filterOption="filterOption"
              :allowClear="true"
            >
              <a-select-option v-for="(item,i) in cpfllist" :key="i" :value="item">{{item}}</a-select-option>
            </a-select>
            <!-- <div class="list_head" v-if="$store.state.bbl_sqdwid!='78736'">
              <div class="fl_right">
                <a-checkbox-group
                  :options="plainOptions"
                  v-model="checkedList"
                  @change="checkChange"
                />
              </div>
            </div>-->
            <div class="list_head">
              <div class="fl_right">
                <a-radio-group name="radioGroup" @change="tjcjrado" default-value="全部">
                  <a-radio value="全部">全部</a-radio>
                  <a-radio value="推荐">推荐</a-radio>
                  <a-radio value="特价" v-if="$store.state.bbl_sqdwid=='78736'">特价</a-radio>
                </a-radio-group>
              </div>
            </div>
            <div class="seach">
              <div class="sele">
                查询：
                <a-input placeholder="请输入型号/品牌 " style="width: 250px" @change="onSearch" />
                <a-icon type="search" class="search" />
              </div>
            </div>
          </div>
        </div>
        <div class="gl_tjwz" v-if="$store.state.tjwz">
          <tjcpym class="gl_tjym"></tjcpym>
        </div>
        <!-- <div class="gl_tjwz" v-if="$store.state.tgtk">
          <tgtk class="gl_tjym"></tgtk>
        </div>-->
        <div class="gl_tjwz" v-if="$store.state.cpscym">
          <cpscym class="gl_tjym"></cpscym>
        </div>
      </div>
    </div>
    <div class="hedlistbtn">
      <div class="headbtn">
        <a-button type="primary" @click="tjwz">添加产品</a-button>
        <a-button v-if="!nbdwbm" type="primary" @click="pldr">批量excel导入</a-button>
        <a-button v-if="!nbdwbm" type="primary" :disabled="dckcflag" @click="dckcdata">
          <div class="dckcbac" v-if="dckcflag">
            <a-spin />
          </div>导出库存
        </a-button>
        <a-button v-if="!nbdwbm" type="primary" @click="gxnewdate">更新时间</a-button>
        <a-popconfirm title="确定删除吗?" @confirm="start">
          <a-button v-if="!nbdwbm" type="primary">选择删除</a-button>
        </a-popconfirm>
        <a-popconfirm title="确定全部删除吗?" @confirm="alldelstart">
          <a-button v-if="!nbdwbm" type="primary">全部删除</a-button>
        </a-popconfirm>
      </div>
      <div class="sj_bz">
        <a-popconfirm
          style="margin-right:10px;"
          title="确定上架吗?"
          v-if="applyment_state=='FINISH'?true:false"
          @confirm="plsj(1)"
        >
          <a-button type="primary">批量上架</a-button>
        </a-popconfirm>

        <a-popconfirm title="确定下架吗?" v-if="applyment_state=='FINISH'?true:false" @confirm="plsj(0)">
          <a-button type="primary">批量下架</a-button>
        </a-popconfirm>上架"功能仅签约佰联电商收付通客户可使用
      </div>
    </div>
    <div class="cpgl">
      <!-- <xzl v-if="$store.state.xzlflg"></xzl> -->
      <a-table
        @change="handleChangelist"
        :loading="loading"
        :columns="columns"
        :pagination="pagination"
        :dataSource="data"
        :rowSelection="rowSelection"
        :scroll="{ x: 1600 }"
      >
        <template v-for="titletext in []" :slot="titletext" slot-scope="text, record, index">
          <div :key="titletext"></div>
        </template>
        <template slot="pic" slot-scope="text, record, index">
          <div>
            <img
              class="cpflimg"
              v-for="(item,s) in record.pic"
              :key="s"
              :src="`https://image.bearing.cn/qy/member/imgcp/`+cpsqdwid+'/'+item"
              alt
            />
          </div>
        </template>
        <template slot="onsale" slot-scope="text, record, index">
          <div class="editable-row-operations">
            <a-tag color="#f50" v-if="record.onsale==1">{{record.onsale==1?'已推荐':''}}</a-tag>
          </div>
        </template>
        <template slot="BEIZHU" slot-scope="text, record, index">
          <div class="editable-row-operations">
            <a-tag color="#f50" v-if="record.BEIZHU=='特价'">特价</a-tag>
          </div>
        </template>

        <template slot="operation" slot-scope="text, record, index">
          <div class="editable-row-operations">
            <!-- <a class="del" @click="()=>tuig(record,record.key)">推广产品</a> -->
            <a class="del" @click="()=>xiugai(record,record.key)">修改</a>
            <a class="del" @click="()=>tuijian(record,record.key)">{{record.onsale==1?'取消推荐':'推荐'}}</a>
            <a
              class="del"
              v-if="applyment_state=='FINISH'?true:false"
              @click="()=>sjcp(record,record.key)"
              :style="record.shop=='是'?'color:rgb(255, 85, 0);':''"
            >{{record.shop=='是'?'下架':'上架'}}</a>
            <a-popconfirm title="确定删除吗?" class="del" @confirm="() => kcdelete(record,record.key)">
              <a href="javascript:;">删除</a>
            </a-popconfirm>
          </div>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script>
import qs from "qs";
import tjcpym from "../tjcp/tjcpym.vue";
// import tgtk from "./tgtk.vue";
import cpscym from "../cpsc/cpscym.vue";
const columns = [
  {
    title: "型号",
    dataIndex: "XL"
  },
  {
    title: "品牌",
    dataIndex: "SCCJC"
  },
  {
    title: "分类",
    dataIndex: "ZLMC"
  },
  {
    title: "数量",
    dataIndex: "WLKGSL"
  },
  {
    title: "网络特价",
    dataIndex: "WLTEJIA"
  },
  // {
  //   title: "价格1",
  //   dataIndex: "WLLSJ"
  // },
  // {
  //   title: "价格2",
  //   dataIndex: "WLPFJ"
  // },
  // {
  //   title: "价格3",
  //   dataIndex: "WLZDJ"
  // },
  // {
  //   title: "牌价",
  //   dataIndex: "PAIJIA"
  // },

  // {
  //   title: "产地",
  //   dataIndex: "SCCD"
  // },
  // {
  //   title: "库房",
  //   dataIndex: "KFMC"
  // },
  {
    title: "产品图",
    dataIndex: "pic",
    scopedSlots: { customRender: "pic" }
  },

  {
    title: "推荐",
    dataIndex: "onsale",
    scopedSlots: { customRender: "onsale" }
  },
  // {
  //   title: "特价",
  //   dataIndex: "BEIZHU",
  //   scopedSlots: { customRender: "BEIZHU" }
  // },
  {
    title: "牌价",
    dataIndex: "PAIJIA",
    scopedSlots: { customRender: "PAIJIA" }
  },
  {
    title: "价格1",
    dataIndex: "WLLSJ",
    scopedSlots: { customRender: "WLLSJ" }
  },
  {
    title: "价格2",
    dataIndex: "WLPFJ",
    scopedSlots: { customRender: "WLPFJ" }
  },
  {
    title: "价格3",
    dataIndex: "WLZDJ",
    scopedSlots: { customRender: "WLZDJ" }
  },
  // {
  //   title: "内径",
  //   dataIndex: "nj"
  // },
  // {
  //   title: "外径",
  //   dataIndex: "wj"
  // },
  // {
  //   title: "宽度",
  //   dataIndex: "kd"
  // },
  // {
  //   title: "重量",
  //   dataIndex: "zl"
  // },
  // {
  //   title: "备注",
  //   dataIndex: "BEIZHU"
  // },
  {
    title: "更新时间",
    dataIndex: "datatime"
  },
  {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" },
    width: "200px",
    fixed: "right"
  }
];
//上传图片
function getBase64(img, callback) {
  const reader = new FileReader();
  let file = [];
  file = reader;
  reader.addEventListener("load", () => callback(reader.result));
  reader.readAsDataURL(img);
  sessionStorage.setItem("file", reader);
}
const data = [];
const plainOptions = ["推荐"];
const defaultCheckedList = [""];
const checkedList = ["推荐"];
export default {
  inject: ["reload"],
  data() {
    this.cacheData = data.map(item => ({ ...item }));
    return {
      data,
      columns,
      dckcflag: false,
      sele: "",
      serchvalue: "",
      pagination: {
        defaultPageSize: 10,
        showTotal: total => `共 ${total} 条数据`,
        total: 0,
        current: 1
      },
      flcx: "",
      loading: true,
      cpsqdwid: "", //授权单位
      datakh: [],
      khvalue: "",
      selectedRowKeys: [],
      fyflag: false,
      cpfllist: [],
      checkedList: defaultCheckedList,
      plainOptions,
      nbdwmc: "", //寄售公司名称
      nbdwbm: "", //寄售公司手机号码
      applyment_state: sessionStorage.getItem("applymentstate"),
      wlkhjb: sessionStorage.getItem("wlkhjb"),
      tuijiantit: "",
      tejia: "",
      priceManage: ""
    };
  },
  methods: {
    //现货数据查询
    onSearch(e) {
      this.serchvalue = e.target.value;
      this.handleChangelist(this.pagination);
    },

    checkChange(value) {
      console.log(this.checkedList);
      this.handleChangelist(this.pagination);
    },
    //推荐
    tuijian(value, key) {
      console.log("var", value);
      this.axios
        .post(
          "/kucun/AdminBusinessRecom.php",
          qs.stringify({
            sqdwid: this.$store.state.bbl_sqdwid,
            id_num: value.ID_NUM,
            xl: value.XL,
            sccjc: value.SCCJC,
            onsale: value.onsale == 1 ? "1" : "0"
          })
        )
        .then(res => {
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });

            for (var i = 0; i < this.data.length; i++) {
              if (this.data[i].ID_NUM == key) {
                this.data[i].onsale = value.onsale == 1 ? "0" : "1";
              }
            }
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }

          //this.handleChangelist(this.pagination)
        });
    },
    tjcjrado(e) {
      console.log("radio checked", e.target.value);
      if (e.target.value == "推荐") {
        this.tuijiantit = "1";
        this.tejia = "";
      } else if (e.target.value == "特价") {
        this.tuijiantit = "";
        this.tejia = "特价";
      } else {
        this.tuijiantit = "";
        this.tejia = "";
      }
      this.handleChangelist(this.pagination);
    },
    //库存数据列表
    handleChangelist(pagination) {
      // this.pagination = pagination;
      this.pagination.current = pagination.current;
      this.axios
        .post(
          "kucun/AdminBusinessListKc.php",
          qs.stringify({
            sqdwid: this.$store.state.bbl_sqdwid,
            filed: this.serchvalue,
            tejia: this.tejia,
            fenlei: this.flcx,
            onsale: this.tuijiantit,
            page: this.pagination.current,
            pageSize: pagination.defaultPageSize,
            nbdwbm: this.nbdwbm
          })
        )
        .then(res => {
          if (res.data.code == 303) {
            this.data = res.data.result.data;
            this.pagination.total = Number(res.data.result.total);
            this.loading = false;
            this.cacheData = this.data.map(item => ({
              ...item
            }));
            for (var i = 0; i < res.data.result.data.length; i++) {
              this.data[i].key = res.data.result.data[i].ID_NUM;
              // console.log('ssssssssssssssspix',res.data.result.data[i].pic)
              if (
                res.data.result.data[i].pic != " " &&
                res.data.result.data[i].pic != null
              ) {
                this.data[i].pic = res.data.result.data[i].pic.split(",");
                //    console.log('spix',this.data[i].pic)
              }
            }
            sessionStorage.setItem("total", res.data.result.total);
          } else {
            this.data = [];

            this.loading = false;
          }
        });
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    //添加产品
    tjwz() {
      this.$store.state.tjwz = true;
      this.$store.state.xiugaiflag = "";
    },
    plsj(isupset) {
      this.axios
        .post(
          "kucun/putOnSaleAll.php",
          qs.stringify({
            sqdwid: this.$store.state.bbl_sqdwid,
            phone: this.$store.state.bbl_phone,
            isupset: isupset
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
            this.handleChangelist(this.pagination);
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    },
    // plxj() {
    //   console.log("000000000");
    // },
    //批量excel导入
    pldr() {
      this.$store.state.cpscym = true;
    },

    //修改
    xiugai(value, key) {
      console.log(value);
      this.$store.state.tjwz = true;
      this.$store.state.xiugaiflag = "123";

      this.$store.state.cpglxg = value;
    },
    sjcp(value, key) {
      this.axios
        .post(
          "kucun/putOnSale.php",
          qs.stringify({
            id_num: value.ID_NUM,
            isupset: value.jsbj == "是" || value.shop == "是" ? 0 : 1,
            phone: this.$store.state.bbl_phone
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
            this.handleChangelist(this.pagination);
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    },
    //分类列表
    getfllist() {
      this.axios
        .post(
          "kucun/SelectProList.php",
          qs.stringify({
            // pro: this.flcx,
            sqdwid: this.$store.state.bbl_sqdwid,
            num: 100
          })
        )
        .then(res => {
          if (res.data.code == 303) {
            this.cpfllist = [];

            for (var i = 0; i < res.data.result.length; i++) {
              this.cpfllist.push(res.data.result[i].proName);
            }
          }
        });
    },
    //产品分类列表
    flchange(value) {
      this.flcx = value;
      console.log(value);
      this.pagination.current = 1;
      this.handleChangelist(this.pagination);
      // this.getfllist();
    },
    //  fetchUser(value) {
    //   this.flcx = value;

    //   this.getfllist();

    //  },
    // flsearch(value) {
    //   console.log('111111')
    //   this.flcx = value;
    //   this.getfllist();
    // },
    //删除库存列表
    kcdelete(value, key) {
      console.log(value);
      const dataSource = [...this.data];
      this.data = dataSource.filter(item => item.key !== key);
      this.axios
        .post(
          "kucun/AdminBusinessDeleteKc.php",
          qs.stringify({
            id_num: value.ID_NUM,
            sqdwid: this.$store.state.bbl_sqdwid
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    },
    //选择删除
    start() {
      const newData = [...this.data];
      let selectedRowKeys = this.selectedRowKeys;

      if (selectedRowKeys.length != "") {
        this.loading = true;
        this.axios
          .post(
            "kucun/AdminBusinessBatchDeleteKc.php",
            qs.stringify({
              id_num: selectedRowKeys,
              sqdwid: this.$store.state.bbl_sqdwid
            })
          )
          .then(res => {
            //更新数据成功
            if (res.data.code == 303) {
              this.loading = false;
              this.selectedRowKeys = "";
              this.$notification["success"]({
                message: "成功",
                description: res.data.msg,
                duration: 1.5
              });
              selectedRowKeys.map(rowkeys => {
                this.data = this.data.filter(item => item.key !== rowkeys);
              });
            } else {
              this.loading = false;
              this.$notification["error"]({
                message: "失败",
                description: res.data.msg,
                duration: 1.5
              });
            }
          });
      } else {
        this.loading = false;
        this.$notification["error"]({
          message: "失败",
          description: "请先选择要删除的数据",
          duration: 1.5
        });
      }
    },
    //全部删除
    alldelstart() {
      this.axios
        .post(
          "kucun/DeleteBusinessKc.php",
          qs.stringify({
            sqdwid: this.$store.state.bbl_sqdwid,
            ly: "导入"
          })
        )
        .then(res => {
          //更新数据成功
          if (res.data.code == 303) {
            this.loading = false;
            this.data = [];
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg,
              duration: 1.5
            });
          } else {
            this.loading = false;
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg,
              duration: 1.5
            });
          }
        });
    },
    //批量导出
    dckcdata() {
      this.dckcflag = true;
      this.axios
        .post(
          "kucun/PushBusinessKc.php",
          qs.stringify({ sqdwid: this.$store.state.sqdwid })
        )
        .then(res => {
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "导出成功",
              description: res.data.msg,
              duration: 1.5
            });
            this.dckcflag = false;

            location.href = res.data.result;
          } else {
            this.dckcflag = false;
            this.$notification["error"]({
              message: "导出失败",
              description: res.data.msg,
              duration: 1.5
            });
          }
        });
    },
    gxnewdate() {
      this.axios
        .post(
          "kucun/RefreshKcTime.php",
          qs.stringify({ sqdwid: this.$store.state.sqdwid })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "更新成功",
              description: res.data.msg,
              duration: 1.5
            });
            this.reload();
          } else {
            this.$notification["error"]({
              message: "更新失败",
              description: res.data.msg,
              duration: 1.5
            });
          }
        });
    }
  },
  computed: {
    rowSelection() {
      const { selectedRowKeys } = this;

      return {
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRowKeys = selectedRowKeys;
        }
      };
    }
  },
  components: {
    tjcpym,
    // tgtk,
    cpscym
    // xzl
  },
  created() {
    // this.applyment_state=sessionStorage.getItem("applyment_state")
    this.nbdwmc = this.$route.params.nbdwmc;
    this.nbdwbm = this.$route.params.nbdwbm;
    this.$store.state.sqdwid =
      this.$store.state.sqdwid == null
        ? this.$store.state.bbl_sqdwid
        : this.$store.state.sqdwid;
    this.handleChangelist(this.pagination);
    this.getfllist();
    this.cpsqdwid = this.$store.state.bbl_sqdwid;
    // if (sessionStorage.getItem("priceManage")) {
    //   var priceManage_list = sessionStorage.getItem("priceManage");
    //   if (priceManage_list.indexOf("WLTEJIA") != -1) {
    //     this.priceManage.WLTEJIA_ok = 1;
    //   }
    //   if (priceManage_list.indexOf("WLLSJ") != -1) {
    //     this.priceManage.WLLSJ_ok = 1;
    //   }
    //   if (priceManage_list.indexOf("WLPFJ") != -1) {
    //     this.priceManage.WLPFJ_ok = 1;
    //   }
    //   if (priceManage_list.indexOf("WLZDJ") != -1) {
    //     this.priceManage.WLZDJ_ok = 1;
    //   }
    //   if (priceManage_list.indexOf("PAIJIA") != -1) {
    //     this.priceManage.PAIJIA_ok = 1;
    //   }
    // }
    if (sessionStorage.getItem("priceManage")) {
      this.priceManage = JSON.parse(sessionStorage.getItem("priceManage"));
      for (var i = 0; i < this.columns.length; i++) {
        if (this.columns[i].dataIndex == "WLTEJIA") {
          console.log(i);
          if (this.priceManage.WLTEJIA_ok != 1) {
            this.columns.splice(i, 1);
          }
        }
        if (this.columns[i].dataIndex == "WLLSJ") {
          if (this.priceManage.WLLSJ_ok != 1) {
            this.columns.splice(i, 1);
          }
        }
        if (this.columns[i].dataIndex == "WLPFJ") {
          if (this.priceManage.WLPFJ_ok != 1) {
            this.columns.splice(i, 1);
          }
        }
        if (this.columns[i].dataIndex == "WLZDJ") {
          if (this.priceManage.WLZDJ_ok != 1) {
            this.columns.splice(i, 1);
          }
        }
        if (this.columns[i].dataIndex == "PAIJIA") {
          if (this.priceManage.PAIJIA_ok != 1) {
            this.columns.splice(i, 1);
          }
        }
      }
    }

     this.columns= this.columns
    console.log(this.priceManage);
    console.log("store--------", this.$store.state.bbl_sqdwid);
  }
};
</script>

<style lang='less'>
.cpgl_box {
  .hedlistbtn {
    position: relative;
    top: 150px;
    width: 98%;
    left: 1%;
    height: 60px;
    background-color: #fff;
    text-align: left;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .headbtn {
      button {
        margin: 0 10px !important;
        position: relative;
      }
      .dckcbac {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(194, 194, 194, 0.5);

        padding: 6px 0px;
      }
    }
  }
  .gl_tjwz {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999999999;
    height: 930px;
    .gl_tjym {
      position: absolute;
      width: 90%;
      top: 2%;
      left: 50%;
      transform: translateX(-50%);
    }
    .tjcpym .tjcpym_tab .tjcpym_cg .cg_n .cg_sunbtn {
      right: 0;
      width: 32%;
      button {
        width: 33%;
      }
    }
  }
  .header_sele {
    position: absolute;
    top: 55px;
    left: 1% !important;
    z-index: 999;
    text-align: right;
    width: 98% !important;
    background-color: #fff;
    box-shadow: 5px 5px 5px #ccc;
    // height: 50px;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0 !important;
    .add_qy {
      // width: 50%;
      display: inline-block;
      text-align: left;
      padding: 10px 0;
      height: 50px !important;
      button {
        margin: 0 10px;
      }
      .ant-btn-primary {
        background-color: #1890ff !important;
        border: 0 !important;
      }
    }
    .seach {
      display: inline-block;
      margin-right: 20px;
      .sele {
        position: relative;
        i {
          position: absolute;
          top: 10px;
          right: 8px;
        }
      }
    }
    .list_head {
      display: inline-block;
      .tit {
        font-size: 16px;
      }
      padding: 10px 15px;
      .fl_right {
        .margin {
          margin: 0 5px;
        }
        .xzl_btn:hover {
          border: 0 !important;
          color: #fff !important;
          background: #1890ff !important;
        }
      }
    }
  }

  .onsale {
    color: #c00;
    font-weight: 600;
  }
  .cpgl {
    width: 98%;
    position: relative;
    top: 161px;
    left: 1%;
    background-color: #fff;
    border: 1px solid #ccc;
    .ant-table-thead > tr,
    .ant-table-tbody > tr {
      height: 50px !important;
    }
  }
  .cpflimg {
    width: 40px;
    height: 40px;
    margin: 0 5px;
  }
  .fyloading {
    position: absolute;
    width: 90% !important;
    border: 1px solid #91d5ff;
    background: rgba(255, 255, 255, 0.5);
    padding: 30px;
    height: 800px !important;
    z-index: 999999 !important;
    top: 108px;
    left: 201px;
    // opacity: .5!important;
    .ant-spin-blur {
      opacity: 1 !important;
    }
    .ant-spin-text {
      font-size: 18px !important;
    }
  }
  .ant-spin-nested-loading > div > .ant-spin {
    position: relative !important;
    top: 100px !important;
  }
  .del {
    padding-right: 5px !important;
    color: #40a9ff;
    cursor: pointer;
  }
}
</style>
